<template>
  <div class="data-table">
    <el-table :border="border" :data="tableData" style="width: 100%" :size="size || 'medium'" v-loading="loading"  @selection-change="selection.func">
      <el-table-column label="序号" type="index" width="50" align="center" v-if="showIndex">
        <template scope="scope">
          <!-- 有分页时，序号显示 -->
          <span v-if="pageObj">{{(pageObj.pageIndex - 1)*pageObj.pageSize + scope.$index + 1}}</span>
          <!-- 无分页时，序号显示 -->
          <span v-else>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" type="selection" width="55" v-if="selection.show">
      </el-table-column>
      <template v-for="(col, index) in columns">
        <!-- 操作列/自定义列 -->
        <slot v-if="col.slot" :name="col.slot"></slot>
        <!-- 普通列 -->
        <el-table-column v-else :key="index" :prop="col.prop" :label="col.label" :width="col.width" :formatter="col.formatter" align="center">
        </el-table-column>
      </template>
    </el-table>
    <!-- 是否调用分页 -->
    <div style="text-align:right;margin-top:10px">
      <el-pagination v-if="pageObj.show" :page-sizes="sizes" :page-size="pageObj.pageSize" :total="pageObj.total" :current-page="pageObj.pageIndex" @size-change="pageObj.sizeChange" @current-change="pageObj.pageIndexChange" background layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 说明：
// 表格size，默认是medium
// 表格序号默认不显示
// 表格操作列由调用页自定义，以及分页相关操作，都在调用页根据自定义
export default {
  name: "tableCommoon",
  data() {
    return {
      
    }
  },
  props:{
      tableData:{
          type:Array,
          default:() => {
              return []
          }
      },
      columns:{
          type:Array,
          default:() => {
              return []
          }
      },
      loading:{
          type:Boolean,
          default:() => {
              return true
          }
      },
      pageObj:{
          type:Object,
          default:() => {
              return {
                  show:false,
                  pageSize:10,
                  total:0,
                  pageIndex:1,
                  sizeChange:(e)=>{

                  },
                  pageIndexChange:(e)=>{

                  }
              }
          }
      },
      showIndex:{
          type:Boolean,
          default:() => {
              return false
          }
      },
      sizes:{
          type:Array,
          default:() => {
              return [10,30,50,100]
          }
      }, 
      selection:{
          type:Object,
          default:() => {
              return {
                  show:false,
                  func:(e)=>{

                  }
              }
          }
      },
      size:{
          type:String,
          default:() => {
              return ""
          }
      },
      border:{
          type:Boolean,
          default:() => {
              return false
          }
      },
  }, 
  // tableData 表格数据，columns 表头， loading 是否开启loading动画，pageObj 分页，showIndex 是否开启序号， 
 
}
</script>